//加载公共样式
require('../../assets/css/index.less')

//加载自己的样式
require('./sports-data.less')

const echarts = require('echarts')
window.onload = () => {
  //渲染柱状图
  function renderBar(data, xData) {
    //1 创建实例对象
    const myChart = echarts.init(document.querySelector('#bar'))

    //2 写上配置项
    let option = {
      //标题组件
      title: {
        text: '近7天运动时长',
        left: 15,
        top: 15,
      },
      //提示框组件
      tooltip: {},
      //图例组件
      // legend: {},
      xAxis: {data: xData,
        // data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11'],
      },
      yAxis: {},
      //核心数据
      series: [
        {
          name: '销量1',
          //type bar柱状图 pie饼图 line折线图
          type: 'bar',
          data: data,
          //data: [5, 20, 76, 10, 60, 80, 150],
        },
    
      ],
    }

    //3 载入配置
    myChart.setOption(option)
  }

  renderBar( [5, 20, 76, 10, 60, 80, 150],
    ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11'])

  //渲染饼图
  function renderPie() {
    //1 创建实例
    const myChart = echarts.init(document.querySelector('#pie'))
//2 配置项
let option = {
  title: {
    text: '运动分类',
    left: 15,
    top: 15,
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'middle',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        {
          value: 40,
          name: '训练',
          label: {
            // show: false,
            position: 'inside',
            color: '#fff',
            formatter: '{c}%',
          },
          itemStyle: {
            color: '#58bb92',
          },
        },
        {
          value: 25,
          name: '跑步',
          label: {
            position: 'inside',
            color: '#fff',
            formatter: '{c}%',
          },
          itemStyle: {
            color: '#736171',
          },
        },
        {
          value: 35,
          name: '骑行',
          label: {
            position: 'inside',
            color: '#fff',
            formatter: '{c}%',
          },
          itemStyle: {
            color: '#ee5c43',
          },
        },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}

    //3 导入配置
    myChart.setOption(option)
  }

  renderPie()
}
